<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
			font-family: "微软雅黑";
		}
		
		#div1 {
			width: 1000px;
			height: 650px;
			/*border: 1px solid;*/
			margin: 0px auto;
			overflow: hidden;
		}
		
		body {
			background-image: url(img/beijing.jpg);
			background-size: 100%;
			background-repeat: no-repeat;
		}
		
		#div2 {
			width: 280px;
			height: 650px;
			background-color: #2E3238;
		}
		
		#div3,
		#div5,
		#div6 {
			width: 720px;
			height: 650px;
			background-color: #EEEEEE;
			/*display: none;*/
		}
		
		#div3,
		#div5 {
			display: none;
		}
		
		#div2,
		#div3,
		#div4,
		#div5,
		#div6 {
			float: left;
		}
		
		#div2-1 {
			margin-top: 10px;
			height: 50px;
			line-height: 50px;
			/*border: 1px solid;*/
			font-size: 24px;
			color: white;
		}
		
		#img1 {
			margin-left: 20px;
			margin-right: 10px;
			width: 40px;
			vertical-align: middle;
		}
		
		#img2 {
			margin-left: 140px;
			vertical-align: middle;
		}
		
		#img3 {
			vertical-align: middle;
		}
		
		#div2-2 {
			height: 30px;
			/*border:1px solid;*/
			margin-top: 10px;
		}
		
		#img4 {
			vertical-align: middle;
			margin-left: 5px;
			margin-top: 2px;
		}
		
		#div2-2 input {
			background-color: #26292E;
			width: 220px;
			height: 25px;
			border: 1px solid #26292E;
			color: #939497;
			font-size: 12px;
			outline: none;
		}
		
		#div2-0 {
			background-color: #26292E;
			width: 250px;
			height: 30px;
			margin-left: 18px;
		}
		
		#img5,
		#img5-1,
		#img5-2 {
			margin-top: 5px;
			margin-left: 15px;
		}
		
		#img5-1,
		#img5-2 {
			display: none;
		}
		
		#div2-3 {
			height: 47px;
			/*border: 1px solid;*/
			position: relative;
		}
		
		.div2-3-4 {
			height: 47px;
			position: absolute;
			top: 0px;
		}
		
		.div2-3-1,
		.div2-3-2,
		.div2-3-3 {
			width: 80px;
			height: 47px;
			/*border: 1px solid;*/
			float: left;
			margin-left: 10px;
		}
		
		#div2-4 {
			height: 505px;
			border-top: 1px solid #24272C;
			position: relative;
		}
		
		#div2-4-1 {
			width: 280px;
			height: 505px;
			overflow: auto;
		}
		
		#div2-4-3,
		#div2-4-4 {
			width: 280px;
			height: 505px;
			overflow: hidden;
			display: none;
		}
		
		.div2-4-5 {
			height: 40px;
			/*border: 1px solid;*/
		}
		
		.div2-4-5 img {
			height: 20px;
		}
		
		.div2-4-7,
		.div2-4-8,
		.div2-4-9 {
			margin-top: 10px;
			/*border: 1px solid;*/
			float: left;
		}
		
		.div2-4-7 {
			margin-left: 20px;
			width: 20px;
			height: 20px;
		}
		
		.div2-4-8 {
			margin-left: 10px;
			color: #888888;
			font-size: 12px;
			width: 150px;
			height: 20px;
		}
		
		.div2-4-9 {
			margin-left: 30px;
			color: #888888;
			font-size: 12px;
			width: 25px;
			height: 20px;
		}
		
		.div2-4-6 {
			height: 60px;
			/*border: 1px solid;*/
		}
		
		.div2-4-10 {
			margin-top: 5px;
			margin-left: 20px;
			height: 50px;
			width: 180px;
			/*border: 1px solid;*/
			font-size: 14px;
			color: white
		}
		
		.div2-4-11 {
			margin-left: 10px;
			margin-top: 5px;
			height: 50px;
			/*border: 1px solid;*/
			width: 50px;
		}
		
		.div2-4-11 img {
			height: 50px;
		}
		
		.div2-4-10,
		.div2-4-11 {
			float: left;
		}
		
		.div2-4-2 {
			width: 10px;
			height: 505px;
			background-color: #2E3238;
			position: absolute;
			top: 0px;
			right: 0px;
			display: none;
		}
		
		.div2-4-2 span {
			display: block;
			width: 10px;
			height: 50px;
			background-color: #777777;
			position: absolute;
			top: 0px;
		}
		
		.ul1 {
			margin-top: 0px;
			list-style-type: none;
		}
		
		.ul1 li {
			height: 50px;
			width: 280px;
			margin: 10px 0px;
			border-bottom: 1px dashed #26292E;
		}
		
		.div1 {
			margin-left: 15px;
			width: 40px;
			height: 40px;
		}
		
		.div2 {
			margin-left: 15px;
			height: 40px;
			width: 190px;
		}
		
		.div1,
		.div2 {
			float: left;
		}
		
		.div1 img {
			width: 40px;
		}
		
		.p1 {
			color: white;
			height: 26px;
			line-height: 26px;
		}
		
		.p2 {
			color: #989898;
			height: 14px;
			line-height: 14px;
			font-size: 12px;
		}
		
		.div3-1 {
			height: 50px;
			width: 680px;
			/*border: 1px solid;*/
			margin: 0px 20px;
			line-height: 50px;
			text-align: center;
		}
		
		#div4 {
			width: 720px;
			height: 650px;
			background-color: #EEEEEE;
			display: none;
		}
		
		.div3-0 {
			margin-left: 20px;
			height: 600px;
			width: 680px;
			border-top: 1px solid #C5C5C5;
		}
		.div3-0-1{
			width: 150px;
			height: 150px;
			/*border: 1px solid;*/
			margin-top: 120px;
			margin-left: 285px;
		}
		.div3-0-1 img{
			width: 150px;
			height: 150px;
		}
		.p0-1{
			margin-left: 30px;
			margin-top: 20px;
			height: 30px;
			line-height: 30px;
			font-size: 20px;
			text-align: center;
		}
		.p0-2{
			margin-left: 30px;
			color: #A3A4A8;
			margin-top: 10px;
			height: 20px;
			line-height: 20px;
			font-size: 14px;
			text-align: center;
		}
		.p0-3{
			margin-top: 10px;
			margin-left: 30px;
			color: #A3A4A8;
			font-size: 12px;
			height: 20px;
			line-height: 20px;
			text-align: center;
		}
		.p0-4{
			margin-left: 30px;
			color: #A3A4A8;
			height: 20px;
			line-height: 20px;
			font-size: 14px;
			text-align: center;
		}
		.inp0-1{
			margin-top: 40px;
			color: white;
			font-size: 14px;
			width: 200px;
			height: 40px;
			line-height: 40px;
			background-color: green;
			margin-left: 265px;
		}
		.div3-2 {
			height: 430px;
			width: 680px;
			border-top: 1px solid #C5C5C5;
			margin: 0px 20px;
			overflow: auto;
		}
		
		.div3-2-1 {
			min-height: 80px;
			width: 300px;
			/*border: 1px solid;*/
			margin: 20px 0px;
		}
		
		.div3-2-6 {
			min-height: 80px;
			width: 300px;
			/*border: 1px solid;*/
			margin: 20px 360px;
			overflow: hidden;
		}
		
		.div3-2-7 {
			height: 75px;
			width: 50px;
			/*border: 1px solid;*/
		}
		
		.div3-2-8 {
			margin-left: 20px;
			min-height: 75px;
			width: 230px;
			/*border: 1px solid;*/
			background-color: aquamarine;
			color: blueviolet;
			word-wrap: break-word;
		}
		
		.div3-2-7 img {
			height: 50px;
			width: 50px;
		}
		
		.div3-2-7,
		.div3-2-8 {
			float: left;
			/*overflow: hidden;*/
		}
		
		.div3-2-2 {
			min-height: 75px;
			width: 300px;
			/*border: 1px solid;*/
			overflow: auto;
		}
		
		.div3-2-4 {
			height: 75px;
			width: 50px;
			/*border: 1px solid;*/
		}
		
		.div3-2-4 img {
			height: 50px;
			width: 50px;
		}
		
		.div3-2-5 {
			margin-left: 20px;
			min-height: 75px;
			width: 230px;
			/*border: 1px solid;*/
			background-color: aquamarine;
			color: blueviolet;
			word-wrap: break-word;
		}
		
		.div3-2-4,
		.div3-2-5 {
			float: left;
			/*overflow: hidden;*/
		}
		
		.div3-2-3 {
			min-height: 15px;
			width: 298px;
			/*border: 1px solid;*/
			overflow: auto;
			text-align: center;
		}
		
		.div3-3 {
			height: 170px;
			width: 720px;
			border-top: 1px solid #C5C5C5;
			position: relative;
		}
		
		.div3-3-1 {
			height: 36px;
			width: 720px;
			/*border: 1px solid;*/
		}
		
		.div3-3-1 img {
			margin-right: 10px;
		}
		
		.div3-3-2 {
			height: 134px;
			width: 720px;
			/*border: 1px solid;*/
		}
		
		.div3-3-3 {
			height: 134px;
			width: 678px;
			border: 1px solid #C5C5C5;
			/*outline:none;*/
		}
		
		.div3-3-4 {
			height: 134px;
			width: 40px;
			/*border: 1px solid;*/
		}
		
		.div3-3-4 input {
			height: 134px;
			width: 40px;
			line-height: 100px;
			font-size: 14px;
		}
		
		.div3-3-3,
		.div3-3-4 {
			float: left;
		}
		
		.div3-3-img {
			position: absolute;
			top: -100px;
			width: 720px;
			height: 100px;
			border: 1px solid;
			display: none;
			background-color: #EEEEEE;
		}
	</style>
	<script src="js/new_file.js"></script>
	<script src="jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		$(function() {

			$(".div3-3-img>img").click(function() {
//				console.log($(this))
				$(".div3-3-3").append($(this));
//				$(".div3-3-3").val($(".div3-3-3").val()+$(this));

			});
			
			$("#biaoqing").click(function() {
				$(".div3-3-img").fadeToggle();
			});
			$("#fasong").click(function() {
				var div1 = $('<div class="div3-2-1"></div>')
				var div2 = $('<div class="div3-2-2"></div>')
				var div3 = $('<div class="div3-2-3"></div>')
				var div4 = $('<div class="div3-2-4"><img src="img/A3.jpg"/></div>')
				var div5 = $('<div class="div3-2-5"></div>')
				$(".div3-2").append(div1);
				div1.append(div2);
				div1.append(div3);
				div2.append(div4);
				div2.append(div5);
				div5.html($(".div3-3-3").html());
				var time = new Date
				var shijian = time.toLocaleString();
				div3.html(shijian);
				$.post("http://www.tuling123.com/openapi/api", {
					key: "d40eb01d7bf144afa3ce745334f559ba",
					info: $(".div3-3-3").html(),
					userid: "123456"
				}, function(date) {
					var div6 = $('<div class="div3-2-6"></div>')
					var div7 = $('<div class="div3-2-7"><img src="img/icon36.png"/></div>')
					var div8 = $('<div class="div3-2-8"></div>')
					var div8 = $('<div class="div3-2-8">' + date.text + '</div>');
					$(".div3-2").append(div6);
					div6.append(div7);
					div6.append(div8);
					$(".div3-2")[0].scrollTop = $(".div3-2")[0].scrollHeight;
				});
				$(".div3-3-img").hide();
				$(".div3-3-3").html("")
				$(".div3-2")[0].scrollTop = $(".div3-2")[0].scrollHeight;

			});
			$(".div2-3-2").click(function() {
				$("#img5-1").show();
				$("#img5").hide();
				$("#img5-2").hide();
				$("#div2-4-3").show();
				$("#div2-4-1").hide();
				$("#div2-4-4").hide();
				$("#div5").hide();
				$("#div4").show();
				$("#div6").hide();
			});
			$(".div2-3-1").click(function() {
				$("#img5").show();
				$("#img5-1").hide();
				$("#img5-2").hide();
				$("#div2-4-1").show();
				$("#div2-4-3").hide();
				$("#div2-4-4").hide();
				$("#div4").hide();
				$("#div5").hide();
				$("#div6").show();

			});
			$(".div2-3-3").click(function() {
				$("#img5-2").show();
				$("#img5").hide();
				$("#img5-1").hide();
				$("#div2-4-4").show();
				$("#div2-4-3").hide();
				$("#div2-4-1").hide();
				$("#div4").hide();
				$("#div6").hide();
				$("#div5").show();
			});
			for(var i = 0; i < haoyou.haoyou.length; i++) {
				var li = $("<li names='" + haoyou.haoyou[i].wxmane + "'><div class='div1'><img src='" + haoyou.haoyou[i].touxiang + "' /></div><div class='div2'><p class='p1'>" + haoyou.haoyou[i].nicheng + "</p><p class='p2'>" + haoyou.haoyou[i].xiaoxi + "</p></div></li>")
				
				
				
				//问题
				li.click(function() {
//					$p1=$("<p class='p0-1'></p>");
//					$p2=$("<p class='p0-2'></p>");
//					$p3=$("<p class='p0-3'>备注:<span></span></p>");
//					$p4=$("<p class='p0-4'>地区:<span></span></p>");
//					$div=$("<div class='div3-0-1'></div>");
//					$inp=$("<input id='fas' type='button' value='发消息' class='inp0-1' />")
//					$("#div5 .div3-0").append($p1);
//					$("#div5 .div3-0").append($p2);
//					$("#div5 .div3-0").append($p4);
//					$("#div5 .div3-0").append($p3);
//					$("#div5 .div3-0").append($inp);
					
					$(".p0-1").html($("li .p1").html());
					
					$(".p0-3 span").html($("li .p1").html());
					
					$(".div3-0-1").html($("li .div1").html());
					
					var $lis = $("#div2-4-1 .ul1").children();
					for(var h = 0; h < $lis.length; h++) {
						var wxname = $lis.eq(h).attr("names");
						if(wxname === this.getAttribute("names")) {
							$("#div2-4-1 .ul1").prepend($lis.eq(h));
							return;
						};
					};
					$("#div2-4-1 .ul1").prepend($(this.outerHTML));
					
					$("#div2-4-1 ul li").click(function() {
						$("#div3").show();
						$("#div3>.div3-1>span").html($(this).find(".p1").html())
				        $("#div6").hide();
						$(".div3-2").html("")
					});
				});
				$("#div2-4-4 .ul1").append(li);
			};

			$("#div2-4").mouseover(function() {
				$(this).find(".div2-4-2").show();
			});
			$("#div2-4").mouseout(function() {
				$(this).find(".div2-4-2").hide();
			});

			var spantop = 0;
			var spant = 0;
			var dianji = false;
			var ultop = 0;
			$(".div2-4-2 span").mousedown(function() {
				var theEvent = window.event || arguments.callee.caller.arguments[0];
				spantop = parseInt($(this).css("top"));
				spant = theEvent.clientY
				ultop = parseInt($("#div2-4-4 .ul1").css("margin-top"));

				dianji = true;
			});

			$("#div2-4").mouseup(function() {
				dianji = false;
			}).mousemove(function() {
				var theEvent = window.event || arguments.callee.caller.arguments[0];
				var moveh = theEvent.clientY - spant
				var t = spantop + moveh
				if(dianji && t >= 0 && t <= 455) {
					$(this).find(".div2-4-2 span").css("top", t + "px");
					var moveheight = parseInt(parseInt($("#div2-4-4 .ul1").css("height")) - 505);
					var mtop = parseInt(moveh / 455 * moveheight);
					var vtop = ultop - mtop;
					if(t == 0) {
						vtop = 0;
					} else if(t == 455) {
						vtop = moveheight * -1;
					};
					$("#div2-4-4 .ul1").css("margin-top", vtop + "px");
				};
			});
			$("#fas").click(function(){
				$("#img5").show();
				$("#img5-1").hide();
				$("#img5-2").hide();
				$("#div2-4-1").show();
				$("#div2-4-3").hide();
				$("#div2-4-4").hide();
				$("#div4").hide();
				$("#div5").hide();
				$("#div6").show();

			});
            $(".div2-4-6").click(function(){
            	$("#div4 .div3-0").find("iframe").show();
            	
            	var t=this.parentNode.children[0].children[1].innerHTML;
            	$("#div4 .div3-1").find("span").html(t);
            });
		});
	</script>

	<body>
		<div id="div1">
			<div id="div2">
				<div id="div2-1">
					<img src="img/A3.jpg" id="img1" />夜<img src="img/04.png" id="img2" /><img src="img/05.png" id="img3" />
				</div>
				<div id="div2-2">
					<div id="div2-0">
						<img src="img/06.png" id="img4" /><input type="text" value="搜索" />
					</div>
				</div>
				<div id="div2-3">
					<img src="img/green_1.png" id="img5" />
					<img src="img/green_2.png" id="img5-1" />
					<img src="img/green_3.png" id="img5-2" />
					<div class="div2-3-4">
						<div class="div2-3-1"></div>
						<div class="div2-3-2"></div>
						<div class="div2-3-3"></div>
					</div>
				</div>
				<div id="div2-4">

					<div id="div2-4-1">
						<ul class="ul1"></ul>
						<!--<div class="div2-4-2">
							<span></span>
						</div>-->
					</div>
					<div id="div2-4-3">
						<div>
						<div class="div2-4-5">
							<div class="div2-4-7"><img src="img/A3.jpg" /></div>
							<div class="div2-4-8">前端开发</div>
							<div class="div2-4-9">周日</div>
						</div>
						<div class="div2-4-6">
							<div class="div2-4-10">这可能是史上最全的CSS自适应布局总结</div>
							<div class="div2-4-11"><img src="img/A3.jpg" /></div>
						</div>
						</div>
						
						
						<div>
						<div class="div2-4-5">
							<div class="div2-4-7"><img src="img/A3.jpg" /></div>
							<div class="div2-4-8">前端早读课</div>
							<div class="div2-4-9">周日</div>
						</div>
						<div class="div2-4-6">
							<div class="div2-4-10">[第88期]界面组件化设计</div>
							<div class="div2-4-11"><img src="img/A3.jpg" /></div>
						</div>
						</div>

					</div>

					<div id="div2-4-4">
						<ul class="ul1"></ul>
						<div class="div2-4-2">
							<span></span>
						</div>
					</div>
				</div>

			</div>
			<div id="div4">
				<div class="div3-1">
					<span>订阅号</span><img src="img/xiajiantou.png" />
				</div>
				<div class="div3-0">
					<iframe style="display: none;" width="100%" height="100%" src="http://www.baidu.com"></iframe>
				</div>
			</div>
			<div id="div5">
				<div class="div3-1">
					<span>详细信息</span>
				</div>
				<div class="div3-0">
					<div class="div3-0-1">
						<img src="img/tx-2.jpg" />
					</div>
					<p class="p0-1">您的昵称</p>
					<p class="p0-2">个性签名</p>
					<p class="p0-3">备注:<span>xxx</span></p>
					<p class="p0-4">地区:<span>xxx</span></p>
					<input id="fas" type="button" value="发消息" class="inp0-1" />
				</div>
			</div>
			<div id="div6">
				<div class="div3-1">

				</div>
				<div class="div3-0"></div>
			</div>
			<div id="div3">
				<div class="div3-1">
					<span></span><img src="img/xiajiantou.png" />
				</div>
				<div class="div3-2">
				</div>
				<div class="div3-3">
					<div class="div3-3-1">
						<img src="img/right_3_1.png" id="biaoqing" />
						<img src="img/right_3_2.png" />
						<img src="img/right_3_3.png" />
						<div class="div3-3-img">
							<img src="img/13.gif" />
							<img src="img/14.gif" />
							<img src="img/15.gif" />
							<img src="img/16.gif" />
							<img src="img/17.gif" />
							<img src="img/18.gif" />
							<img src="img/19.gif" />
							<img src="img/20.gif" />
							<img src="img/21.gif" />
							<img src="img/22.gif" />
							<img src="img/23.gif" />
							<img src="img/24.gif" />
							<img src="img/25.gif" />
							<img src="img/27.gif" />
							<img src="img/28.gif" />
							<img src="img/29.gif" />
							<img src="img/30.gif" />
							<img src="img/31.gif" />
							<img src="img/32.gif" />
							<img src="img/33.gif" />
							<img src="img/34.gif" />
							<img src="img/35.gif" />
							<img src="img/36.gif" />
							<img src="img/26.gif" />
							<img src="img/37.gif" />
							<img src="img/38.gif" />
							<img src="img/39.gif" />
							<img src="img/40.gif" />
							<img src="img/4.gif" />
							<img src="img/5.gif" />
							<img src="img/6.gif" />
							<img src="img/8.gif" />
							<img src="img/9.gif" />
							<img src="img/2.gif" />
							<img src="img/3.gif" />
							<img src="img/7.gif" />
						</div>
					</div>
					<div class="div3-3-2">
						<div class="div3-3-3" contenteditable="true"></div>
						<!--<textarea class="div3-3-3"></textarea>-->
						<div class="div3-3-4">
							<input type="button" name="" id="fasong" value="发送" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>